<template>
  <div>
    <div class="LNav col">
      <template v-for="item in navList">
        <div class="LNlist">
          <li @click.stop.prevent="go(item)" class="LNli pointer">
            {{ item[label] }}
          </li>
          <div class="moreNav row" v-if="item.children">
            <template v-for="ite in item.children">
              <div class="Mli">
                <li @click.stop.prevent="go(ite)" class="Mlili pointer">
                  {{ ite[label] }}
                </li>
              </div>
            </template>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return { leftNav: [] };
  },
  props: ["navList", "label", "param", "path", "filter"],
  methods: {
    go(item) {
      if (this.path) {
        this.$store.commit("HSearchInfo/setHSearchInfo", {
          typeId: item.typeId,
        });
        //指定跳转到图书分类filter页面
        this.$router.push({
          path: this.path,
          query: { typeId: item.typeId },
        });
      } else if (this.filter) {
        //书籍分类的筛选
        this.$emit("cahngeTypeId", item.typeId);
      } else if (this.param) {
        //个人中心的挑战
        //传入参数
        // console.log("")
        if (item[this.param]) {
          // console.log("go:", param);
          this.$goto(item[this.param]);
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
.LNav {
  position: relative;
  width: 180px;
  max-height: 700px;
  min-width: 180px;
  background: rgb(129, 134, 135);
  color: lightblue;
  font-size: 24px;
  font-family: "font1";
  // font-weight: 100;
  .LNlist {
    position: relative;
    .LNli {
      padding-left: 20px;
      line-height: 2;
    }
    .moreNav {
      z-index: 99;
      display: none;
      position: absolute;
      // top: 0;
      left: 180px;
      width: 240px;
      // height: 300px;
      background: rgb(247, 244, 244);
      border: 1px solid lightslategray;
      padding: 10px;
      font-size: 18px;
      .Mli {
        margin-right: 20px;
        margin-left: 20px;
        position: relative;
        border-bottom: 1px solid lightcoral;
        margin-bottom: 20px;
      }
      // .Mlili:not(:last-child)::after {
      //   position: absolute;
      //   content: "/";
      //   right: 10px;
      //   // top: 50%;
      // }
      // .Mli:not(:last-child)::after {
      //   position: absolute;
      //   content: "/";
      //   right: 10px;
      //   // top: 50%;
      // }
      .Mli:hover {
        color: aquamarine;
      }
    }

    .LNli:hover {
      background: rgb(128, 229, 240);
      color: rgb(142, 144, 142);
    }
  }
  .LNlist:nth-child(2n + 1) {
    background: rgb(146, 142, 142);
  }
  .LNlist::after {
    content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    border-top: 2px black solid;
    border-right: 2px black solid;
    transform: rotate(45deg);
    top: calc(50% - 4px);
    right: 20px;
  }
  .LNlist:hover {
    .moreNav {
      display: block;
    }
  }
  .LNlist:nth-child(n + 7) {
    .moreNav {
      bottom: 0;
    }
  }
  .LNlist:nth-child(-n + 6) {
    .moreNav {
      top: 0;
    }
  }
}
</style>